<template>
  <div class="home">
    <van-sticky>
    <van-nav-bar :title="$t('myText.团队')" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="descCon">
      {{$t('myText.我的')}}
      <div class="teamTop">
        <div class="teamNum">
          <p>{{$t('myText.直属')}}</p>
          <p class="directNum">{{temp.total_direct}}</p>
        </div>
        <div class="teamTop_btm">
          <van-row>
            <van-col span="12">
              <p>{{temp.group_person_count}}</p>
              {{$t('myText.人数')}}
            </van-col>
            <van-col span="12">
              <p>{{temp.achievement_money}}</p>
              {{$t('myText.个人')}}
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 团队详情 -->
      <div class="teamList" v-if="temp.team.length>0">
        <div class="teamItem" v-for="(item,index) in temp.team" :key="index">
          <div class="itemTop">
            <img :src="item.head_image" alt class="leftEl" />
            <div class="leftEl" style="width:80%;">
              <p class="userName">{{item.nick_name}}</p>
              <div class="userOther">
                <span class="userTime">{{item.create_time}}</span>
                <span>{{item.member}}</span>
              </div>
            </div>
          </div>
          <div class="itemCon">
            <van-row>
              <van-col span="12">
                <p class="recommendNum">{{item.total_direct}}</p>
                {{$t('myText.推荐')}}
              </van-col>
              <van-col span="12">
                <p class="teamNum">{{item.achievement_money}}</p>
                {{$t('myText.个人')}}
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>
        {{$t('myText.noData')}}
      </div>
    </div>
  </div>
</template>
<script>
import { Sticky } from 'vant';
import { teamInfo } from "@/api/personal";
import { getParams } from "@/utils/getParams";
import {backpage} from "@/utils/backPage";
export default {
  data() {
    return {
      temp: {
        team: []
      }
    };
  },
  mounted() {
    let params=getParams();
    localStorage.setItem("usertoken", params.token);
    localStorage.setItem('lang',params.id);
    this.$i18n.locale=params.id;
    teamInfo().then(res => {
      this.temp = res;
    });
  },
  methods: {
    onClickLeft() {
      backpage();
    }
  }
};
</script>

<style scoped lang="less">
.home {
  font-size: 13px;
  color: #333;
  .descCon {
    padding: 20px 16px;
    .teamTop {
      width: 345px;
      height: 212px;
      margin: 20px auto;
      border-radius: 5px;
      box-shadow: 0 0 3px #ccc;
      .teamNum {
        color: #333;
        font-size: 18px;
        text-align: center;
        height: 95px;
        line-height: 40px;
      }
      .van-row {
        border-top: 1px solid #F0EFEF;
        padding-top: 35px;
        .van-col {
          text-align: center;
          p {
            color: #FD3C15;
            font-size: 18px;
            margin-bottom: 20px;
          }
        }
      }
    }
    .teamItem {
      width: 345px;
      height: 140px;
      margin: 20px auto;
      border-radius: 5px;
      box-shadow: 0 0 3px #ccc;
      box-sizing: border-box;
      padding: 10px 10px 22px 10px;
      .itemTop {
        overflow: hidden;
        height: 60px;
        border-bottom: 1px solid #F0EFEF;
        width: 100%;
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
          border-radius: 50%;
        }
        .userName {
          margin-bottom: 10px;
        }
        .userOther {
          font-size: 12px;
          color: #999;
          position: relative;
          width: 100%;
          span {
            &:last-child {
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .van-row {
        padding-top: 15px;
        .van-col {
          text-align: center;
          p {
            color: #66CCFF;
            font-size: 13px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
.directNum{
  position: relative;
  &:after{
    width:33px;
    height:3px;
    background:#FB4F05;
    position: absolute;
    display: block;
    border-radius:1.25px;
    content:'';
    top:40px;
    left:45.5%;
  }
}
</style>
